import { useStores } from '@/stores';
import { Pagination, Spin, Tabs } from 'antd';
import { observer } from 'mobx-react-lite';
import { FC, Ref, useEffect, useState } from 'react';
import TabContent from './tabContent';
import './index.less';
import { runInAction } from 'mobx';

interface FlawCardsConf {
  onRef: Ref<unknown> | undefined;
  onSubmit?: (params: any) => void;
}

const FlawCards: FC<FlawCardsConf> = (FlawCardsProp: FlawCardsConf) => {
  const { lotStore } = useStores();

  /**
   * 缺陷卡片页数改变事件
   * @param page
   */
  const onChangePage = async page => {
    runInAction(() => {
      lotStore.card.currentPage = page;
    });
    await lotStore.changeFlawCardReq(lotStore.sheet.sheetId, lotStore.lotId);
  };

  // tab页改变
  const onChangeTab = async (key: string) => {
    runInAction(() => {
      lotStore.card.station = key;
      lotStore.card.currentPage = 1;
    });
    if (lotStore.sheet.sheetId) {
      await lotStore.changeFlawCardReq(lotStore.sheet.sheetId, lotStore.lotId);
    } else {
      console.log('片列表为空，没有目标片，不会请求对应工站的缺陷卡片');
    }
  };

  return (
    <div className="flaw-card-all">
      <Spin tip="加载缺陷卡片中..." spinning={lotStore.card.spin}>
        <Tabs
          activeKey={lotStore.card.station}
          onChange={onChangeTab}
          items={[
            {
              label: `前制程`,
              key: 'doff',
              children: <TabContent />
            },
            {
              label: `POL`,
              key: 'pol',
              children: <TabContent />
            },
            {
              label: `偏贴后`,
              key: 'piantiehou',
              children: <TabContent />
            }
          ]}
        />
        <div className="papgation">
          {/*  showQuickJumper跳转到第几页-----暂时不做这个功能 */}
          <Pagination
            className="pagination"
            showSizeChanger={false}
            current={lotStore.card.currentPage}
            total={lotStore.card.total}
            onChange={onChangePage}
            showTotal={() => `总数:${lotStore.card.total}`}
            pageSize={lotStore.card.pageSize || 9}
            style={{ paddingTop: '10px' }}
          />
        </div>
      </Spin>
    </div>
  );
};
export default observer(FlawCards);
